<template>
	<view class="shop_body">
		<scroll-view scroll-y="true" :style="'height:' + scrollviewHigh + 'px;'" class="scroll-Y" lower-threshold="50"
			@scrolltolower="scrolltolowerFunc">
			<view class="shop_body_l_item" v-for="(item, index) in product_list" :key="index">
				<image :src="item.productImage" @click="goto_product(item.productId)" image />
				<view class="shop_body_l_item_info" @click="goto_product(item.productId)">
					<view class="shop_body_l_item_info_title h1">{{ item.productName }}</view>
					<view class="shop_body_l_item_info_price">
						<view class="h2 red">HK$<text class="h1">{{ item.productPrice }}</text></view>
						<view class="h4 huaxianjia" v-if="item.linePrice > 0">HK$<text
								class="h3">{{ item.linePrice }}</text>
						</view>
					</view>
					<view class="shop_body_l_item_info_others h3">
						<view class="shop_body_l_item_info_others_sales">
							{{ $t('user.total_sales') }}{{ item.productSales }}{{ $t('user.items') }}</view>
					</view>
				</view>
				<button type="default" @click="cancelFav(item.productId)">{{ $t('user.unsubscribe') }}</button>
			</view>
			<view class="d-c-c p30" v-if="product_list.length == 0 && !loading">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">{{ $t('user.no_records') }}</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			/*底部加载*/
			loading: true,
			/*没有更多*/
			no_more: false,
			//页面高度
			scrollviewHigh: '',
			//商品列表
			product_list: [],
			//当前页
			page: 1,
			//总页数
			last_page: '',
			isfollow: '',
		}
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.product_list.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	onShow() {
		this.init();
		this.getData();
		uni.setNavigationBarTitle({
			title: this.$t('user.order_payment')
		})
	},
	methods: {
		/*初始化*/
		init() {
			let self = this;
			self.page = 1;
			self.product_list = [];
			uni.getSystemInfo({
				success(res) {
					self.scrollviewHigh = res.windowHeight;
				}
			});
		},
		//获取数据
		getData() {
			let self = this;
			self.loading = true;
			self._postBody('user/favorite/list', {
				pageIndex: self.page,
				type: 20,
				pageSize: 15,
			}, (res) => {
				self.loading = false;
				self.last_page = res.data.lastPage;
				self.product_list = self.product_list.concat(res.data.records);
				if (res.data.lastPage <= 1) {
					self.no_more = true;
				} else {
					self.no_more = false;
				}
			})

		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			if (self.no_more) {
				return;
			}
			self.page++;
			if (self.page <= self.last_page) {
				self.getData();
			} else {
				self.no_more = true;
			}
		},
		goto_product(e) {
			this.gotoPage('pages/product/detail/detail?productId=' + e);
		},
		//关注店铺/取消关注
		//取消收藏
		cancelFav(productId) {
			let self = this;
			uni.showLoading({
				title: this.$t('user.canceling')
			});
			self._post('user/favorite/cancelFav', {
				productId: productId
			}, (res) => {
				uni.hideLoading();
				self.page = 1;
				self.product_list = [];
				self.getData();
			});
		},
	}
}
</script>

<style>
page {
	background-color: #f2f2f2;
}

.h1 {
	font-size: 32rpx;
}

.h2 {
	font-size: 28rpx;
}

.h3 {
	font-size: 24rpx;
}

.h4 {
	font-size: 20rpx;
}

.h5 {
	font-size: 16rpx;
}

.h6 {
	font-size: 12rpx;
}

.red {
	color: #E2231A;
}

.huaxianjia {
	text-decoration: line-through;
	color: #585858;
	margin-left: 5rpx;
}

.shop_body {
	width: 100%;
	background-color: #f2f2f2;
}

.shop_body_l_item {
	width: 90%;
	height: 250rpx;
	margin: 0 auto;
	background-color: white;
	border-radius: 15rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
	position: relative;
}

.shop_body_l_item image {
	width: 34.5%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
}

.shop_body_l_item_info {
	width: 65.5%;
	height: 170rpx;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding-left: 20rpx;
	box-sizing: border-box;
}

.shop_body_l_item_info_title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}

.shop_body_l_item_info_price {
	display: flex;
	align-items: flex-end;
}

.shop_body_l_item_info_price view {
	margin-right: 15rpx;
}

.shop_body_l_item_info_others {
	width: 100%;
	height: 30rpx;
	display: flex;
	justify-content: space-between;
}

.shop_body_l_item_info_others_activity {
	width: 150rpx;
	height: 30rpx;
	line-height: 30rpx;
	border: 1rpx #E22319 solid;
	border-radius: 30rpx;
	/* font-size: 16rpx; */
	color: #E22319;
	text-align: center;
	box-sizing: border-box;
}

.shop_body_l_item_info_others_sales {
	color: #585858;
}

.shop_body_l_item button {
	font-size: 24rpx;
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0;
	background-image: linear-gradient(90deg, #F11E0B, #F77737);
	color: white;
	position: absolute;
	top: 165rpx;
	left: 530rpx;
	z-index: 999;
}
</style>